<template>
  <div style="width: 1200px; margin: 0 auto">
    <el-container>
      <el-main>
        <div class="comments">
          <div style="font-weight: bold;font-size: 25px">留言专区</div>
          <br><br><br><br><br>
          <span>
            <img style="height: 900px;position: fixed;right: 352px;top: 200px;margin: auto" src="/images/imgs/commentdog.jpg">
            <img style="height: 900px;position: fixed;left: 354px;top: 200px;margin: auto" src="/images/imgs/commentcat.jpg">

            <!--假评论-->
            <div style="position: relative;right: 10px;border: 1px solid;padding: 20px;background-color: rgba(0,195,249,0.05)">
              <img style="height: 50px;" src="/images/imgs/commentT1.png">
              <span>
                <span style="font-weight: bold;font-size: 20px">二郎神拣：&nbsp</span>
                我家狗子对我爸妈护食，我靠近它就不护食
                <img style="height: 30px;" src="/images/imgs/image_emoticon16.png">
                <img style="height: 30px;" src="/images/imgs/image_emoticon16.png">
                <img style="height: 30px;position: relative;right: 75px" src="/images/imgs/image_emoticon16.png">
              </span>
              <div style="position: relative;right: 235px;bottom: 30px">初出茅庐</div>
              <br><br><br><br><br><br><br><br><br><br><br><br>
              <div style="position: relative;left: 255px;top: 20px">1楼</div>
              <br>
            </div>

            <!--假评论-->
            <div style="position: relative;right: 10px;top: 30px;border: 1px solid;padding: 20px;background-color: rgba(0,195,249,0.05)">
              <div style="position: relative;right: 180px">
                <img style="height: 50px;" src="/images/imgs/commentT3.png">
                <span style="font-weight: bold;font-size: 20px;">只养二哈：&nbsp</span>
                <div style="position: relative;right: 55px;color: #843534">大陆霸主</div>
              </div>
              <div style="position: relative;bottom: 60px;right: -180px;width: 380px;text-align: left">
                &nbsp; &nbsp; &nbsp; &nbsp;护食的行为比较常见，最佳的方法不是打他或者抢走食物，大的刺激都可能会咬你，应该是是一点一点靠近，这东西耐性不行，心里也知道谁是老大，只是本性冲动。
                <img style="height: 30px;" src="/images/imgs/image_emoticon25.png">
                <img style="height: 30px;" src="/images/imgs/image_emoticon25.png">
                <img style="height: 30px;" src="/images/imgs/image_emoticon25.png">
              </div>
              <br><br><br><br><br><br><br><br><br><br><br><br>
              <div style="position: relative;left: 255px;top: 20px">2楼</div>
              <br>
            </div>

            <!--假评论-->
            <div style="position: relative;right: 10px;top: 60px;border: 1px solid;padding: 20px;background-color: rgba(0,195,249,0.05)">
              <div style="position: relative;right: 180px">
                <img style="height: 50px;" src="/images/imgs/commentT2.png">
                <span style="font-weight: bold;font-size: 20px;">御兽之魂：&nbsp</span>
                <div style="position: relative;right: 55px;color: #843534">新晋冒险家</div>
              </div>
              <div style="position: relative;bottom: 60px;right: -180px;width: 380px;text-align: left">
                &nbsp; &nbsp;沙发沙发。
                <img style="height: 30px;" src="/images/imgs/image_emoticon3.png">
                <img style="height: 30px;" src="/images/imgs/image_emoticon3.png">
                <img style="height: 30px;" src="/images/imgs/image_emoticon3.png">
              </div>
              <br><br><br><br><br><br><br><br><br><br><br><br>
              <div style="position: relative;left: 255px;top: 20px">3楼</div>
              <br>
            </div>

            <!--假评论-->
            <div style="position: relative;right: 10px;top: 90px;border: 1px solid;padding: 20px;background-color: rgba(0,195,249,0.05)">
              <div style="position: relative;right: 180px">
                <img style="height: 50px;" src="/images/imgs/commentT4.png">
                <span style="font-weight: bold;font-size: 20px;">王弄汤姆：&nbsp</span>
                <div style="position: relative;right: 55px;color: blueviolet">神秘行者</div>
              </div>
              <div style="position: relative;bottom: 60px;right: -180px;width: 380px;text-align: left">
                &nbsp; &nbsp; &nbsp; &nbsp;你打他还不行，得你爸妈打他，护食的时候直接摁地上揍一顿，让狗知道它在这个家里是老小！！！
                <img style="height: 30px;" src="/images/imgs/image_emoticon22.png">
                <img style="height: 30px;" src="/images/imgs/image_emoticon22.png">
                <img style="height: 30px;" src="/images/imgs/image_emoticon22.png">
              </div>
              <br><br><br><br><br><br><br><br><br><br><br><br>
              <div style="position: relative;left: 255px;top: 20px">4楼</div>
              <br>
            </div>

            <!--假评论-->
            <div style="position: relative;right: 10px;top: 90px;border: 1px solid;padding: 20px;background-color: rgba(0,195,249,0.05)">
              <div style="position: relative;right: 180px">
                <img style="height: 50px;" src="/images/imgs/commentT4.png">
                <span style="font-weight: bold;font-size: 20px;">王弄汤姆：&nbsp</span>
                <div style="position: relative;right: 55px;color: #d58512">空间划破者</div>
              </div>
              <div style="position: relative;bottom: 60px;right: -180px;width: 380px;text-align: left">
                <img style="width: 400px" src="https://img1.baidu.com/it/u=4030079675,3837071059&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500"><br><br><br>
                  <img style="height: 30px;" src="/images/imgs/image_emoticon22.png">
                  <img style="height: 30px;" src="/images/imgs/image_emoticon22.png">
                  <img style="height: 30px;" src="/images/imgs/image_emoticon22.png">
                <span v-for="row in 1" :key="row">
                  <img v-for="n in 8" :key="`icon3-${row}-${n}`" style="height: 30px;" src="/images/imgs/image_emoticon3.png">
                  <br>
                </span>
                  <span v-for="row in 6" :key="row">
                  <img v-for="n in 11" :key="`icon3-${row}-${n}`" style="height: 30px;" src="/images/imgs/image_emoticon3.png">
                  <br>
                </span>
              </div>
              <div style="position: relative;left: 255px;top: 20px">5楼</div>
              <br>
            </div>


            <div style="position: relative;">
              <!--显示评论列表-->
              <ul v-if="comments.length">
                <li v-for="comment in comments" :key="comment.id">
                  <p><strong>{{ comment.name2 }}</strong></p>
                  <p>{{ comment.content }}</p>
                  <p>{{ formatDate(comment.date) }}</p>
                </li>
              </ul>
              <!--发表评论表单-->
              <form @submit.prevent="submitComment">
                <div style="position: relative;right: 10px;top: 120px;border: 1px solid;padding: 20px;background-color: rgba(0,195,249,0.05)">
                  <label for="content" style="text-align: left"><i class="el-icon-edit"></i>发表留言:</label>
                  <textarea style="height: 200px" id="content" v-model="newComment.content" required></textarea>
                  <button type="submit" style="border-radius: 4px;height: 30px">&nbsp 发表评论 &nbsp</button>
                </div>
              </form>
            </div>
            <br><br><br><br><br><br><br><br><br><br>
          </span>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "indexView",
  name2: "MyComponent",
  data() {
    return {
      src: '',
      url: '',
      items: [
        'banner01.png',
        'banner02.png',
        'banner03.png'],
      checkList: ['选中且禁用', '单选框 A'],
      checkList2: ['选中且禁用', '单选框 A'],
      comments: [],
      newComment: {
        name: '',
        content: ''
      }
    };
  },
  computed: {
    noMore() {
      return this.count >= 20
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
  methods: {
    load() {
      this.loading = true
      setTimeout(() => {
        this.count += 2
        this.loading = false
      }, 2000)
    },
    submitComment() {
      // 发布评论逻辑，此处仅将新评论添加到评论列表中
      const comment = {
        id: Date.now(),
        name: this.newComment.name,
        content: this.newComment.content,
        date: new Date()
      };
      this.comments.push(comment);

      // 清空表单数据
      this.newComment.name = '';
      this.newComment.content = '';
    },
    formatDate(date) {
      // 格式化日期，可以根据实际需要使用日期格式化库
      return date.toLocaleString();
    }
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

img {
  border: none;
  vertical-align: middle;
}

h1 {
  color: #e53;
  font-size: 20px;
  font-weight: normal;
}

h2 {
  color: #e53;
  font-size: 20px;
  font-weight: normal;
  float: left;
}


.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/*轮播图开始*/
.el-carousel__item h3 {
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

/*轮播图结束*/

#below_banner_img > a > img {
  float: left;
  background: #fff;
  width: 266px;
  height: 90px;
}

.menu_div {
  margin-top: -315px;
  width: 170px;
  height: 100px;
  margin-right: 3px;

}

.container_right_div {
  margin-top: -0px;
}

.menu_body {
  border: 1px solid darkgoldenrod;
  float: left;
  width: 200px;
  position: relative;
  display: inline-block;
  height: 82%;
}

.menu_body_div1 {
  position: absolute; /* 子级 div 设为绝对定位 */
  left: -50px; /* 将其左侧定位在父级 div 左侧 */
  top: 0;
  margin-bottom: 5px;
}

.menu_body_div2 {
  margin-bottom: 5px;
  position: absolute; /* 子级 div 设为绝对定位 */
  top: 25px;
}

.menu_body span {
  float: left;
  width: 55px;
  padding: 5px 0 0;
}

.menu_body a {
  color: #666;
}

/*设置图标颜色*/
.fa-dog {
  color: orange;
}

.fa-cat {
  color: orange;
}

.fa-dove {
  color: orange;
}

.fa-fish {
  color: orange;
}

.fa-mouse-pointer {
  color: orange;
}

.product_div {
  margin-top: 30px;
}

.product_div_a {
  float: right;
  color: #666;
}

.block {
  position: relative;
  right: 400px;
  top: 100px;
}

.infinite-list-wrapper {
  position: relative;
  left: 100%;
  top: 50%;
  transform: translate(-50%, -50%);

}

/* 样式可以根据实际需求进行自定义 */
.comments {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  text-align: center;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 20px;
}

label, input, textarea {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

/*固定窗口*/
.fixed-image {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 1000px;
}

</style>
